'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { message,Tabs,Input, Collapse,Alert,Row, Col, Form , Radio, Button, Upload, Icon } from 'antd';
const FormItem = Form.Item;

import PhonePreview from './PhonePreview.jsx';
import Api from '../../../../config/api';
import Request from '../../utils/request';
import { setRow,setDetail } from '../../reducers/page/actions';
import { setLoading } from '../../reducers/common/actions';

class ComponentBox extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        let index = this.props.index;
        let selectIndex = this.props.selectIndex;

        let product = this.props.detail.items[this.props.curTabKey].state.picItems[selectIndex].items[index];
        const props = {
            name: 'file',
            listType:"picture",
            showUploadList:false,
            headers: {
                Authorization: Request.getSession(),
            },
            onRemove:(file)=>{
                return file;
            },
            beforeUpload:()=>{
                this.props.setLoading(true);
            },
            onChange:(info)=> {
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 上传成功。`);
                    let {url} = info.file.response;
                    //console.log(url)
                    this.changePic(url);
                    this.props.setLoading(false);
                } else if (info.file.status === 'error') {
                    this.props.setLoading(false);
                    message.error(`${info.file.name} 上传失败。`);
                }
            },
            action: Api.adminUpload,
            multiple:false
        };
        return (
            <Form horizontal >
                {
                    product.url ?
                        <FormItem
                            label="预览"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 19 }}>
                            <p><img src={product.url} width="80" height="80" alt=""/></p>
                        </FormItem>:null
                }
                <FormItem
                    label="图片"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    help={`上传格式:png/jpg,如果是jpg格式,背景请设置:#f6f6f6,如果为png,请设置为透明背景;宽度和长度比例:1/1,图片在不失真的情况下尽量压缩`}>
                    <Upload  {...props} >
                        <Button type="ghost">
                            <Icon type="upload" /> 点击上传
                        </Button>
                    </Upload>
                </FormItem>

                <FormItem
                    label="标题"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    help="最多七位字符">
                    <Input value={product.title} onChange={::this.onChangeProduct.bind(this,"title")}/>
                </FormItem>
                <FormItem
                    label="价格"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    help="">
                    <Input value={product.price} onChange={::this.onChangeProduct.bind(this,"price")}/>
                </FormItem>
                <FormItem
                    label="产品ID"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    help="淘宝店铺产品ID">
                    <Input value={product.id} onChange={::this.onChangeProduct.bind(this,"id")}/>
                </FormItem>

            </Form>
        );
    }
    onChangeProduct(key,e){
        //if(key == "title" && e.target.value.length > 7){
        //    return;
        //}
        let {selectIndex,index} = this.props;
        let {detail} = this.props;
        detail = detail.setIn(['items',this.props.curTabKey,"state","picItems",selectIndex,"items",index,key], e.target.value);
        this.props.setDetail(detail);
    }
    changePic(url){
        let {detail} = this.props;
        detail = detail.setIn(['items',this.props.curTabKey,"state","picItems",this.props.selectIndex,"items",this.props.index,'url'], url);
        this.props.setDetail(detail);
    }
}

export default connect(
    state =>{
        return {
            row:state.page.row,
            detail:state.page.detail,
            curTabKey:state.page.curTabKey,
            common:state.common
        }
    },
    dispatch =>{
        return {
            setRow: (row)=>dispatch(setRow(row)),
            setDetail: (row)=>dispatch(setDetail(row)),
            setLoading: (isLoading)=>dispatch(setLoading(isLoading))
        };
    }
)(ComponentBox);

